<template>
  <q-card class="bg-transparent no-shadow no-border">
    <q-card-section class="row">
      <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
        <div class="text-h6 float-left q-ml-md q-mt-sm">过滤</div>
        <q-space />
        <q-select
          dense
          outlined
          style="min-width: 200px"
          v-model="type"
          :options="['All', 'Free', 'Paid']"
          class="float-right"
          label="类别"
        />
      </div>
    </q-card-section>
    <q-card-section class="q-mx-sm">
      <div class="row q-col-gutter-lg">
        <div
          class="col-lg-3 col-sm-12 col-xs-12 col-md-3"
          v-for="data in getData"
          :key="data.title"
        >
          <q-card style="background-color: #292845" class="text-white">
            <q-img :src="data.img" />
            <q-separator></q-separator>
            <q-card-section class="text-h5 text-center">
              {{ data.title }}--{{ data.type }}
            </q-card-section>
            <q-card-section class="text-justify">
              <div>
                {{ text }}
              </div>
            </q-card-section>
            <q-card-actions align="around" class="text-subtitle1">
              <q-btn
                color=""
                icon="remove_red_eye"
                class="bg-transparent text-capitalize"
                flat
                label="200 阅读量"
              />
              <div class="float-right">
                <q-btn
                  color=""
                  icon="chat_bubble"
                  class="bg-transparent"
                  flat
                  label="56"
                />
              </div>
            </q-card-actions>
          </q-card>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { baseImg, baseImg2 } from 'src/pages/data/list';

const cards_data = [
  {
    img: baseImg,
    type: 'free',
    text: '后来想想那份深情，倒像是胡闹。',
    title: '标题 1',
  },
  {
    img: baseImg2,
    type: 'paid',
    text: '后来想想那份深情，倒像是胡闹。',
    title: '标题 2',
  },
  {
    img: baseImg2,
    type: 'free',
    text: '后来想想那份深情，倒像是胡闹。',
    title: '标题 3',
  },
  {
    img: baseImg2,
    type: 'free',
    text: '后来想想那份深情，倒像是胡闹。',
    title: '标题 4',
  },
  {
    img: baseImg2,
    type: 'paid',
    text: '后来想想那份深情，倒像是胡闹。',
    title: '标题 5',
  },
  {
    img: baseImg2,
    type: 'free',
    text: '后来想想那份深情，倒像是胡闹。',
    title: '标题 6',
  },
];
const type = ref('All');
const text = '后来想想那份深情，倒像是胡闹。';
const getData = computed(() => {
  if (type.value == 'All') {
    return cards_data;
  } else {
    let typeNoRef = type.value;
    return cards_data.filter(function (item) {
      return item.type.toLowerCase() == typeNoRef.toLowerCase();
    });
  }
});
</script>

<style scoped></style>
